<template>
  <div class="project-page">
    <!-- 顶部标题 -->
    <Header :login="true"/>
    <div class="back-page">
      <!-- 页面内容 -->
      <div class="content">
        <!-- 标题 -->
        <div class="breadcrumb">
          <el-link type="primary" @click="onCancel" icon="DArrowLeft">返回</el-link>
          <span>首页 / {{ nametype }}控制台 {{ title }}</span>
        </div>
        <div class="table">
          <!-- 筛选条件 -->
          <div v-if="type != 'participate'">
            <el-form @keydown.enter="searchHandle" class="filters">
              <span class="searchTitle">评审日期：</span>
              <el-date-picker
                v-model="auditTime"
                style="max-width: 200px"
                type="date"
                placeholder="请选择评审日期"
                :size="size"
              />

              <span class="searchTitle">项目状态：</span>
              <el-select
                v-model="projectStatus"
                placeholder="请选择项目状态"
                style="max-width: 200px"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span class="searchTitle">项目名称：</span>
              <el-input
                v-model="name"
                placeholder="请输入项目名称"
                style="max-width: 200px"
              />
              <span class="searchTitle">
                <el-button type="primary" @click="searchHandle">查询</el-button>
                <el-button type="warning" icon="Refresh" @click="resetHandle">
                  重置
                </el-button>
              </span>
            </el-form>
          </div>
          <div v-else>
            <el-form @keydown.enter="searchHandle" class="filters">
              <span class="searchTitle">开始时间：</span>
              <el-date-picker
                v-model="auditStartTime"
                style="max-width: 200px"
                type="date"
                placeholder="请选择开始时间"
                :size="size"
              />
              <span class="searchTitle">结束时间：</span>
              <el-date-picker
                v-model="auditEndTime"
                style="max-width: 200px"
                type="date"
                placeholder="请选择结束时间"
                :size="size"
              />

              <el-select
                v-model="projectStatus"
                placeholder="请选择项目状态"
                style="max-width: 200px; margin-left: 30px"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-input
                v-model="name"
                placeholder="请输入项目名称"
                style="max-width: 200px; margin-left: 30px"
              />
              <span class="searchTitle">
                <el-button type="primary" @click="searchHandle">查询</el-button>
                <el-button type="warning" icon="Refresh" @click="resetHandle">
                  重置
                </el-button>
              </span>
            </el-form>
          </div>
          <div style="background-color: #fff">
            <el-table :data="tableData" style="width: 88%; margin: 0 6%">
              <el-table-column
                v-if="type != 'participate'"
                prop="status"
                label="项目状态"
                width="150"
                align="center"
              >
                <template #default="scope">
                  <span>{{ getDict("project_status", scope.row.status) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="项目名称" header-align="left">
                <template #default="scope">
                  <span class="name" @click="handleProjectClick(scope.row)">
                    {{ scope.row.name }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="评审日期"
                header-align="center"
                width="200"
                align="center"
              >
                <template #default="scope">
                  <span class="name" @click="handleProjectClick(scope.row)">
                    {{ scope.row.auditTime }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页组件 -->
        </div>
        <el-pagination
          style="display: flex; justify-content: center; margin:30px 0 0"
          background
          layout="prev, pager, next, jumper"
          :total="totalItems"
          :current-page="currentPage"
          :page-size="searchForm.pageSize"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import moment from "moment";
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDict, getDictList } from "@/utils/common.js";
import { judgeprojectList, MyJudgeList } from "@/api/project.js";

const route = useRoute();
const router = useRouter();
const type = computed(() => route.query.type);
const usertype = ref("");
const nametype = ref("");
const Nametype = ref("");
const title = computed(() =>
  type.value == "participate" ? `/ 我${Nametype.value}的项目` : ""
);
const auditTime = ref("");
const auditStartTime = ref("");
const auditEndTime = ref("");
const projectStatus = ref("");
const name = ref("");
const tableData = ref([]);
const userInfo = computed(() => JSON.parse(localStorage.getItem("judgeInfo")));

const statusOptions = ref([]);

const searchForm = ref({ pageNum: 1, pageSize: 14 });
const currentPage = ref(1);
const totalItems = ref(0);

const handleProjectClick = (item) => {
  if (type.value == "select") {
    navTo(`/judgedetail?id=${item.id}&type=${type.value}`);
  } else {
    navTo(`/judgedetail?id=${item.id}&type=${type.value}`);
  }
};

const navTo = (path) => {
  router.push(path);
};

const signOut = () => {
  window.location.replace("/");
  localStorage.clear();
};
const searchHandle = () => {
  currentPage.value = 1; // 搜索时重置当前页
  getprojectList();
};

const resetHandle = () => {
  auditTime.value = "";
  auditStartTime.value = "";
  auditEndTime.value = "";
  projectStatus.value = null;
  name.value = "";
  currentPage.value = 1; // 重置时重置当前页
  getprojectList();
};

const getprojectList = () => {
  getDictList("project_status").then((res) => {
    statusOptions.value = res;
  });

  if (type.value === "participate") {
    MyJudgeList({
      userId: userInfo.value.id,
      auditStartTime: auditStartTime.value
        ? moment(auditStartTime.value).format("YYYY-MM-DD")
        : "",
      auditEndTime: auditEndTime.value
        ? moment(auditEndTime.value).format("YYYY-MM-DD")
        : "",
      status: projectStatus.value,
      name: name.value,
    }).then((res) => {
      if (res.code === 200) {
        tableData.value = res.data;
        totalItems.value = res.total;
      }
    });
  } else {
    judgeprojectList({
      ...searchForm.value,
      pageNum: currentPage.value,
      pageSize: searchForm.value.pageSize,
      auditTime: moment(auditTime.value).format("YYYY-MM-DD"),
      status: projectStatus.value,
      name: name.value,
    }).then((res) => {
      if (res.code === 200) {
        tableData.value = res.rows;
        totalItems.value = res.total;
      }
    });
  }
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  getprojectList();
};

const onCancel = () => {
  if (window.history.length > 1) {
    window.history.back(); // 返回上一页
  } else {
    router.push(`judgeProject?type=${route.query.type}`);
    window.location.reload(); // 刷新当前页面
  }
};
onMounted(() => {
  getprojectList();
  const judgeInfo = localStorage.getItem("judgeInfo");
  if (judgeInfo) {
    try {
      const parsedJudgeInfo = JSON.parse(judgeInfo);
      usertype.value = parsedJudgeInfo.type;

      // 根据 usertype 设置 nametype 和 Nametype
      if (usertype.value === "judge_compere") {
        nametype.value = "主持人";
        Nametype.value = "主持";
      } else if (usertype.value === "judge_jury") {
        nametype.value = "评委";
        Nametype.value = "评委";
      } else {
        nametype.value = "监督人";
        Nametype.value = "监督";
      }
    } catch (error) {
      console.error("解析本地存储数据失败:", error);
    }
  } else {
    console.warn("未找到本地存储中的 judgeInfo");
  }
});
</script>

<style scoped lang="scss">
.back-page {
  min-height: calc(100vh - 56px);
  background: url("../../assets/f87147698f07020d4fea348f49da0166.png") no-repeat
    center center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  height: 55px;
  border-bottom: 1px solid #eee;

  .logo {
    display: flex;
    align-items: center;

    img {
      height: 50px;
      margin-right: 8px;
    }

    span {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .user-info {
    display: flex;
    align-items: center;

    span {
      margin-right: 16px;
    }
  }
}

.content {
  padding: 15px 0 30px;
  width: 80%;
  margin: 0 auto;
}
.breadcrumb {
  color: #888;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  margin-left: -10px;
  span {
    margin-left: 20px;
  }
}
.filters {
  display: flex;
  gap: 8px;
  padding: 30px 0px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* 定义 .name 样式 */
.name {
  cursor: pointer; /* 改变鼠标指针形状为手型 */
  text-decoration: none; /* 移除默认的下划线 */
  color: inherit; /* 继承父元素的颜色 */
}

/* 设置鼠标悬停时的样式 */
.name:hover {
  color: blue; /* 颜色变为蓝色 */
  text-decoration: underline; /* 添加下划线 */
  cursor: pointer;
}
.table {
  margin: 0 50px;
  box-shadow: 0px 0px 15px #585858;
  border-radius: 5px;
  overflow: hidden;
  /* background: linear-gradient(to right, #c6daff, #c6e1fe, #c7ebfe); */
}
.searchTitle {
  font-weight: 600;
  font-size: 15px;
  margin-left: 10px;
  button {
    width: 120px;
    margin: 0 10px;
  }
}
:deep(.is-center.is-leaf.el-table__cell) {
  padding: 0px;
}
:deep(th .cell) {
  padding: 8px 0;
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
  color: #000;
  &::after {
    content: "";
    height: 2px;
    width: 100px;
    position: absolute;
    bottom: 0;
    background-color: #0170fe;
  }
}
:deep(.el-table) {
  --el-table-border: 0px solid transparent;
  --el-table-row-hover-bg-color: transparent;
}
:deep(.is-center.is-leaf.el-table__cell) {
  text-align: left;
}
</style>
